<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/animations/ripple-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/hero-animation.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-badge/paper-badge.html">
<link rel="import" href="../../bower_components/iron-icons/av-icons.html">
<link rel="import" href="simulation-info.html">
<link rel="import" href="control-simulation-buttons.html">



<dom-module id="animated-grid">
    <template>
        <style>
            :host {
                display: block;
            }

            .grid-item-simulations:hover{

                border-color: hsla(0, 0%, 0%, 0.5);
            }

            .grid-sizer-simulations,
            .grid-item-simulations
            {
                width: auto;
                heigth:auto;
            }


            .grid-simulations:after {
                content: '';
                display: block;
                clear: both;
            }

            .grid-simulations {
                background: transparent;
                max-width: 100%;
            }

            .grid-item-simulations {
                width:auto;
                height:auto;
                float: left;
                background-color: #B8C4CC;
                border-color: hsla(0, 0%, 0%, 0.5);
                border: 3px solid;

                color: black;
                border-radius: 15px;
                font-size: large;
                padding:10px;
                position:relative;
                margin-left: 1%;
                margin-top: 20px;
                margin-left: 20px;
            }

            control-simulation-buttons{
                margin-top:30px;
            }

           .onHover:hover{
               cursor: pointer;
           }
            paper-badge{
                --paper-badge-width:20px;
                --paper-badge-height:20px;
                --paper-badge-text-color:black;
                --paper-badge-background: #B8C4CC;
                border-color: hsla(0, 0%, 0%, 0.5);
                visibility: hidden;
                cursor: pointer;
                text-transform: uppercase;
                font-size: 15px;
            }

            .grid-item-simulations:hover > paper-badge{
                visibility: visible;
                z-index: 5555;
            }

        </style>

        <div class="grid-simulations">
            <div class="grid-sizer-simulations"></div>
            <template is="dom-repeat" id="l_sim" items="{{listItem}}" as="sim">
                <div class="grid-item-simulations layout vertical" id="sim-{{sim.id}}">
                        <simulation-info class="onHover" sim={{sim}} id="sim-info"></simulation-info>
                        <control-simulation-buttons status={{sim.status}} on-submit-sim="_onSubmitSim"></control-simulation-buttons>
                        <template is="dom-if" if="{{checkStatus(sim.status)}}">
                            <paper-badge icon="close" on-click="deleteSim"></paper-badge>
                        </template>
                </div>
            </template>
        </div>
    </template>
</dom-module>

<script>
    Polymer({
        is: 'animated-grid',
        behaviors: [
            Polymer.NeonSharedElementAnimatableBehavior
        ],
        properties: {
            listItem:{
                type:Array
            },

            animationConfig: {
                type: Object,
                value: function() {
                    return {
                        'exit': [{
                            name: 'ripple-animation',
                            id: 'ripple',
                            fromPage: this
                        }, {
                            name: 'hero-animation',
                            id: 'hero',
                            fromPage: this
                        }]
                    }
                }
            }
        },


        attached: function(){
            this.async(function(){
                $('.grid-simulations').masonry({
                            itemSelector: '.grid-item-simulations',
                            columnWidth: '.grid-sizer-simulations',
                            percentPosition: true
                        }
                );
            });
        },
        _onSubmitSim: function(event){
            var id = event.target.parentElement.id;
            var op = event.detail.data;
            id=id.substring(id.indexOf("-")+1,id.length);
            var scope = this;
            $.ajax({
                url:"simulationController",
                data:"id="+id+"&op="+op
            });
        },

        checkStatus: function(status){

            return (status.toLowerCase()=="created");
        },

        deleteSim: function (event){
            var target = event.target;
            var id_sim = this.$.l_sim.itemForElement(target).id;
            $.ajax({
                url:"removeSimulation",
                data:"id="+id_sim
            });
        }


    });
</script>